<template>
     <el-aside :width="$store.state.isCollapsed ? '64px' : '220px'">
          <el-menu :collapse="$store.state.isCollapsed" :router="true" :default-active="route.fullPath">
               <el-menu-item index="/index">
                    <el-icon>
                         <HomeFilled />
                    </el-icon>
                    <span>首页</span>
               </el-menu-item>
               <el-menu-item index="/center">
                    <el-icon>
                         <Avatar />
                    </el-icon>
                    <span>个人中心</span>
               </el-menu-item>

               <el-sub-menu index="/user-manage" v-admin>
                    <template #title>
                         <el-icon>
                              <UserFilled />
                         </el-icon>
                         <span>用户管理</span>
                    </template>

                    <el-menu-item index="/user-manage/adduser">添加用户</el-menu-item>
                    <el-menu-item index="/user-manage/userlist">用户列表</el-menu-item>

               </el-sub-menu>
               <el-sub-menu index="/news-manage">
                    <template #title>
                         <el-icon>
                              <MessageBox />
                         </el-icon>
                         <span>新闻管理</span>
                    </template>

                    <el-menu-item index="/news-manage/newsadd">创建新闻</el-menu-item>
                    <el-menu-item index="/news-manage/newslist">新闻列表</el-menu-item>

               </el-sub-menu>
               <el-sub-menu index="/product-manage">
                    <template #title>
                         <el-icon>
                              <Reading />
                         </el-icon>
                         <span>产品管理</span>
                    </template>

                    <el-menu-item index="/product-manage/addproduct">添加产品</el-menu-item>
                    <el-menu-item index="/product-manage/productlist">产品列表</el-menu-item>

               </el-sub-menu>

          </el-menu>
     </el-aside>
</template>

<script setup>
import { HomeFilled, Avatar, UserFilled, MessageBox, Reading, Pointer } from '@element-plus/icons-vue'
import { useStore } from 'vuex';
import { useRoute } from 'vue-router'
// 当前路由信息
const route = useRoute()
const store = useStore()
const vAdmin = {
     mounted(el) {
          // console.log(el)
          if (store.state.userInfo.role !== 1) {
               el.remove()
          }
     },
}
</script>
<style lang="scss" scoped>
.el-aside {
     height: 100vh;
     transition: all 700ms;

     .el-menu {
          height: 100vh;
     }
}
</style>